<template>
	<view class="content">
		<view class="topbox">
			<view class="setbox">
				<view class="set-left">
					<uv-icon name="calendar" size="30" color="#fff"></uv-icon>
					<view class="text">签到</view>
				</view>
				<view class="set-right">
					<uv-icon name="setting" size="30" color="#fff"></uv-icon>
					<uv-icon name="chat" size="30" color="#fff"></uv-icon>
				</view>
			</view>
			<view class="users" @click="setFun">
				<view class="u-top">
					<template v-if="!userInfo.nickName">
						<image src="../../static/tt.jpg" mode="aspectFill"></image>
						<view class="txt">注册/登录</view>
					</template>
					<template v-else>
						<image :src="userInfo.avatarURL" mode="aspectFill"></image>
						<view class="txt">{{ userInfo.nickName }}</view>
					</template>
				</view>
				<view class="u-bottom">
					<view class="u-item">
						<view class="num">27</view>
						<view class="sty">点赞</view>
					</view>
					<view class="u-item">
						<view class="num">27</view>
						<view class="sty">喜欢</view>
					</view>
					<view class="u-item">
						<view class="num">27</view>
						<view class="sty">浏览</view>
					</view>
					<view class="u-item">
						<view class="num">27</view>
						<view class="sty">收藏</view>
					</view>
				</view>
			</view>
		</view>
		<view class="listBox">
			<view class="lists">
				<uni-list>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" showArrow clickable title="个人信息"></uni-list-item>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon2" showArrow clickable title="我的购物车"></uni-list-item>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon3" showArrow clickable title="用户反馈"></uni-list-item>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon4" showArrow clickable title="我的邮件"></uni-list-item>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon5" showArrow clickable title="分享有礼"></uni-list-item>
				</uni-list>
			</view>
		</view> 
		<uv-popup ref="popup" mode="bottom" closeable>
			<view class="popup">
				<view class="title">获取您的昵称，头像</view>
				<view class="form">
					<view class="label">获取用户头像：</view>
					<button class="avatar-warpper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="userInfo.avatarURL"></image>
					</button>
				</view>
				<view class="form">
					<view class="label">获取用户昵称：</view>
					<input @input="changeName" type="nickname"></input>
				</view>
				<view class="butto">
					<button type="primary" @click="userSubmit">确认</button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import { ref,reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { login,getUserInfo } from '../../api/api.js'
	
	const extraIcon1=reactive({
		color:'#666666',
		size:'22',
		type:'auth'
	})
	const extraIcon2=reactive({
		color:'#666666',
		size:'22',
		type:'cart'
	})
	const extraIcon3=reactive({
		color:'#666666',
		size:'22',
		type:'chatboxes'
	})
	const extraIcon4=reactive({
		color:'#666666',
		size:'22',
		type:'email'
	})
	const extraIcon5=reactive({
		color:'#666666',
		size:'22',
		type:'gift'
	})
	
	const popup=ref(null)
	
	onLoad(async()=>{
		if(uni.getStorageSync('token') && !uni.getStorageSync('userInfo')){
			const { avatarURL,nickName }=await getUserInfo()
			userInfo.value.avatarURL=avatarURL
			userInfo.value.nickName=nickName
		}else if(uni.getStorageSync('token') && uni.getStorageSync('userInfo')){
			const  { nickName,avatarURL } =JSON.parse(uni.getStorageSync('userInfo'))
			userInfo.value.avatarURL=avatarURL
			userInfo.value.nickName=nickName
		}
	})
	
	const userInfo=ref({
		nickName:"",
		avatarURL:"../../static/tt.jpg"
	})
	
	const onChooseAvatar=(e)=>{
		userInfo.value.avatarURL=e.detail.avatarURL
	}
	
	const changeName=(e)=>{
		userInfo.value.nickName=e.detail.value
	}
	
	const userSubmit=()=>{
		uni.setStorageSync('userInfo',JSON.stringify(userInfo.value))
		popup.value.close()
	}
	
	const setFun=()=>{
		uni.showModal({
			title:'温馨提示',
			content:'授权微信登录后才能正常使用小程序',
			success(res){
				if(res.confirm){
					uni.login({
						success:async(data)=>{
							console.log(data)
							const { token } = await login(data.code)
							console.log(token,'token')
							uni.setStorageSync('token',token)
							const { avatarURL,nickName } = await getUserInfo()
							userInfo.value.avatarURL=avatarURL
							userInfo.value.nickName=nickName
							popup.value.open();
						}
					})
				}
			}
		})
	}
	
	
</script>

<style lang="scss" scoped>
.content{
	background-color: rgb(242,240,240);
	height:100vh;
	.topbox{
		position:relative;
		width:100%;
		z-index:1;
		overflow:hidden;
		padding:40rpx 20rpx 40rpx;
		box-sizing:border-box;
	}
	.topbox::after{
		content:"";
		width:140%;
		height:200px;
		position:absolute;
		z-index: -1;
		top:0;
		left:-20%;
		background-color:#00aaff;
		border-radius: 0 0 50% 50%;
	}
	.setbox{
		display:flex;
		justify-content: space-between;
		align-items: center;
		.set-left{
			width:18%;
			display:flex;
			justify-content: space-between;
			align-items: center;
		}
		.set-right{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 18%; // 可以根据需要调整宽度
		}
		.text{
			color:#fff;
			font-size: 30rpx;
		}
	}
	.users{
		margin-top:35rpx;
		padding:30rpx;
		box-sizing:border-box;
		height:280rpx;
		background-color: #fff;
		box-shadow: 1px 10rpx 20rpx #ececec;
		border-radius: 16rpx;
		.u-top{
			display:flex;
			justify-content:flex-start;
			align-items:center;
			margin-bottom:30rpx;
			image{
				width:100rpx;
				height:100rpx;
				border-radius: 50%;
				margin-right:20rpx;
			}
			.txt{
				font-size: 30rpx;
				font-weight: 700;
				color:#333;
			}
		}
	}
	.u-bottom{
		display:flex;
		justify-content:space-around;
		align-items: center;
		.u-item{
			text-align: center;
			.sty{
				color:#757575;
				font-size:26rpx;
				margin-top:10rpx;
			}
			.num{
				color:#000;
				font-size:33rpx;
				font-weight:700;
			}
		}
	}
	.popup{
		padding:20rpx;
		border-radius:20rpx 20rpx 0 0;
		.title{
			margin-bottom:20rpx;
			font-size:40rpx;
			text-align:center;
		}
		.form{
			display:flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1px solid #f5f5f5;
			padding:24rpx 0;
		}
		image{
			width:70rpx;
			height: 70rpx;
		}
		.avatar-warpper{
			border:none;
			border-radius: 10rpx;
			width:70rpx;
			height: 70rpx;
			margin-left: 20rpx;
			padding:0;
		}
	}
	.listBox{
		height:200rpx;
		margin:-10rpx auto 0;
		padding:20rpx;
		box-sizing:border-box;
		border-radius: 12rpx;
	}
}

</style>
